<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="flex flex-col">
          <div class="w-11/12 flex justify-around items-center">
            <el-select
              v-model="form.cate_id"
              placeholder="请选择类别"
              style="width: 18%"
            >
              <el-option
                v-for="item in categoryOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-date-picker
              v-model="form.finish_date"
              class="w-2/12"
              placeholder="请选择许愿时间"
              style="width: 18%"
              type="date"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-input
              v-model="form.price"
              placeholder="请输入价格"
              style="width: 18%"
            ></el-input>
            <el-input
              v-model="form.wish_user_code"
              placeholder="请输入许愿者ID"
              style="width: 18%"
            ></el-input>
            <el-input
              v-model="form.finish_nickname"
              placeholder="请输入祝福者昵称"
              style="width: 18%"
            ></el-input>
          </div>

          <div class="w-full flex mt-3 mb-3">
            <div class="w-11/12 flex justify-around items-center">
              <el-select
                v-model="form.status"
                placeholder="请选择状态"
                style="width: 18%"
              >
                <el-option label="已实现" value="1"></el-option>
                <el-option label="未实现" value="0"></el-option>
              </el-select>
              <el-input
                v-model="form.product_name"
                placeholder="请输入商品名称"
                style="width: 18%"
              ></el-input>
              <el-input
                v-model="form.days"
                placeholder="天数"
                style="width: 18%"
              ></el-input>
              <el-input
                v-model="form.wish_nickname"
                placeholder="请输入许愿者昵称"
                style="width: 18%"
              ></el-input>
              <el-input
                v-model="form.finish_user_code"
                placeholder="请输入祝福者ID"
                style="width: 18%"
              ></el-input>
            </div>
            <div class="ml-4 flex items-center">
              <i
                class="el-icon-search p-1 text-white text-2xl bg-green-500 cursor-pointer"
                @click="getTableData"
              ></i>
              <i
                class="el-icon-refresh p-1 ml-3 text-white text-2xl bg-red-500 cursor-pointer"
                @click="resetClick"
              ></i>
            </div>
          </div>
        </div>
      </div>

      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column label="序号" prop="id"></el-table-column>
        <el-table-column
          label="许愿者ID"
          prop="wish_user_code"
        ></el-table-column>
        <el-table-column
          label="许愿者昵称"
          prop="wish_nickname"
        ></el-table-column>
        <el-table-column label="许愿商品" prop="product_name"></el-table-column>
        <el-table-column label="类别" prop="cate_name"></el-table-column>
        <el-table-column label="展示图片" prop="picture">
          <template slot-scope="scope">
            <el-popover max-width="420" placement="left" trigger="hover">
              <img :src="scope.row.picture" alt="" class="w-64 h-64"/>
              <img
                slot="reference"
                :preview-text="`${scope.row.picture}`"
                :src="scope.row.picture"
                alt=""
                class="w-20"
                preview="3"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="商品效果图" prop="special">
          <template slot-scope="scope">
            <el-popover max-width="420" placement="right" trigger="hover">
              <img :src="scope.row.special" alt="" class="w-64 h-64"/>
              <img
                slot="reference"
                :preview-text="`${scope.row.special}`"
                :src="scope.row.special"
                alt=""
                class="w-20"
                preview="3"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="许愿天数" prop="days"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>

        <el-table-column
          label="祝福ID"
          prop="finish_user_code"
        ></el-table-column>
        <el-table-column
          label="祝福昵称"
          prop="finish_nickname"
        ></el-table-column>

        <el-table-column
          label="许愿时间"
          prop="add_time"
          width="220"
        ></el-table-column>
        <el-table-column
          label="祝福时间"
          prop="finish_time"
          width="220"
        ></el-table-column>

        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span>{{ scope.row.status === 1 ? '已实现' : '未实现' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <TMPagination
        :current-page.sync="pageList.page"
        :page-size.sync="pageList.page_size"
        :total.sync="pageList.total"
        @updateTable="getTableData"
      />
    </el-card>
  </div>
</template>

<script>
import { categoryList, wishListTable } from '../../../api/personalizedMall/wishList'
import TMPagination from './childComps/TMPagination/TMPagination'

export default {
  name: 'wishList',
  data() {
    return {
      loading: false,
      tableData: [],
      value: null,
      input: null,
      options: [],
      form: {
        status: null, // 状态 1 已实现  0 未实现
        cate_id: null, // 分类id
        wish_user_code: null, // 许愿者ID
        wish_nickname: null, // 许愿者昵称
        finish_user_code: null, // 祝福（完成）者ID
        finish_nickname: null, // 祝福（完成）者昵称
        finish_date: null, // 祝福（完成）日期
        product_name: null, // 商品名称
        days: null, // 天数
        price: null // 价格
      },
      pageList: {
        page: 1,
        page_size: 10,
        total: 20
      },
      categoryOption: []
    }
  },
  components: {
    TMPagination
  },
  created() {
    // this.getCategoryList()
    this.categoryData()
    this.getTableData()
  },
  methods: {
    /**
     * resetClick
     * @desc 重置按钮 点击事件
     */
    resetClick() {
      for (const argumentsKey in this.form) {
        this.form[argumentsKey] = null
      }
      this.pageList = {
        page: 1,
        page_size: 10,
        total: 10
      }
      this.getTableData()
    },
    // 网络请求
    /**
     * getTableData
     * @desc 获取表格数据
     */
    async getTableData() {
      // 默认值
      let form = {
        cate_id: null, // 分类id
        wish_user_code: null, // 许愿者ID
        wish_nickname: null, // 许愿者昵称
        finish_user_code: null, // 祝福（完成）者ID
        finish_nickname: null, // 祝福（完成）者昵称
        finish_date: null, // 祝福（完成）日期
        product_name: null, // 商品名称
        status: -1, // 状态：-1（默认）：不限制；0：未实现；1：已实现
        days: null, // 天数
        price: null // 价格
      }
      for (const formKey in this.form) {
        if (
          !(
            !this.form[formKey] &&
            typeof this.form[formKey] != 'undefined' &&
            this.form[formKey] != 0
          ) ||
          !this.form[formKey]
        ) {
          form[formKey] = this.form[formKey]
        }
      }

      this.loading = true
      const detail = await wishListTable(form, {
        page_size: this.pageList.page_size,
        page: this.pageList.page
      })
      if (detail.code === 200) {
        this.tableData = detail.data.data
        this.pageList.page = detail.data.current_page
        this.pageList.total = detail.data.total
        this.pageList.page_size = detail.data.per_page * 1
        this.loading = false
      }

    },
    /**
     * categoryData
     * @desc 获取所有的类别
     */
    async categoryData() {
      const detail = await categoryList()
      if (detail.code === 200) {
        detail.data.map(item =>
          this.categoryOption.push({
            value: item.id,
            label: item.title
          })
        )
      }
      // 私聊回声的值  公屏回声的值   24  昵称特效的值

    }
  }
}
</script>

<style></style>
